<template>
  <div class="app-container">
    <div class="Print_Div">
    <el-drawer :title="title" :visible.sync="openDetail" size="810px" @close="cancel">
      <template v-slot:title>
        <span class="titleDiv">{{ title }}</span>
      </template>
      <!-- :span-method="objectSpanMethod" -->
      <div style="padding: 10px 20px">
        <div>
          <el-button type="primary" v-print="printContent">打印</el-button>
        </div>
        <div id="printMes" class="printDiv">
          <!-- <H3 class="H3">分拣单</H3> -->
          
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <span>工单编号：</span>
                <span>{{ form.workorderCode }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>领料仓库：</span>
                <span>{{ form.warehouseName }}</span>
              </div>
            </el-col>
         
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <span>规格型号：</span>
                <span>{{ form.productSpc }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>产品编号：</span>
                <span>{{ form.productCode }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span>产品名称：</span>
                <span>{{ form.productName }}</span>
              </div>
            </el-col>
          </el-row>
          <el-table v-loading="loading"   :data="ticketData" :span-method="objectSpanMethod" resizable
          style="width: 100%;border-color:#333"
          fit
          :header-cell-style="{border:'1px solid #333',}"
          :cell-style="{border:'1px solid #333',fontSize:'12px',padding:'0px'}"
          class="exporttable"
          >
            <el-table-column label="序号" align="center" width="50px" prop="issueCode">
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column label="物料编码" align="left" width="90px"  prop="itemCode" />
            <el-table-column label="物料名称" align="left" width="120px" prop="itemName" show-overflow-tooltip />
            <el-table-column label="规格型号" align="left" width="255px" prop="specification" show-overflow-tooltip />
           <!-- add begin by zyj 2024/10/18 打印分拣单：分子列前增加 是否加工 -->
           <el-table-column label="加工" align="left" width="50px"  prop="process" >
              <template slot-scope="scope">
                <span>{{scope.row.process == 1? '是' : '否'}}</span>
              </template>
            </el-table-column>
            <!-- add end by zyj 2024/10/18 打印分拣单：分子列前增加 是否加工 -->
            <el-table-column label="分子" align="left" width="50px"  prop="jdyNumerator" />
            <el-table-column label="领料数量" align="left" width="80px"  prop="quantityIssued" />
            <el-table-column label="所属工序" align="center" width="80px" prop="processName" />
          </el-table>
        </div>
      </div>
    </el-drawer>
  </div>
  </div>
</template>
    
  <script>
import {   listIssuedetail,issueInfoList } from "@/api/mes/wm/issueDetail";
export default {
  data() {
    return {
      openDetail: false,
      title: "查看打印详情",
      // 表单参数
      form: {},
      loading: false,
      ticketData: [],
      printContent: {
        id: "printMes", // 打印的区域
        preview: false, // 预览工具是否启用
        previewTitle: "打印预览", // 预览页面的标题
        popTitle: "", // 打印页面的页眉
        extraCss:
          "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback() {
          console.log("正在加载预览窗口");
        },
        previewOpenCallback() {
          console.log("已经加载完预览窗口");
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true;
          console.log("打开之前");
        },
        openCallback(vue) {
          vue.printLoading = false;
          console.log("执行了打印");
        },
        closeCallback() {
          console.log("关闭了打印工具");
        },
        clickMounted(vue) {
          console.log("点击了打印按钮");
          vue.printContent.popTitle = vue.tableHead; // 动态设置页眉
        }
      }
    };
  },
  dicts: ["mes_workorder_status"],
  methods: {
    //初始化函数
    init(row) {
      console.log(row, "子组件的row");
      this.ticketData = [];
      this.form = row;
      //调接口需要的id
      this.workorderId = row.workorderId;
      this.openDetail = true;
      this.getList(row);
    },
    getList(row) {
      this.loading = true;
      console.log(row, "====row=======");
      //edit begin zyj 
      // issueInfoList(row.issueId).then(res => {
      //   if (res.code == 200) {
      //     this.ticketData = res.data;
      //     this.loading = false;
      //     this.getSpanArr(res.data || []);
      //     console.info("this.ticketData1", this.ticketData1);
      //   }
      // });

      listIssuedetail({ issueId: row.issueId }).then(res => {
        if (res.code == 200) {
          this.ticketData = res.data;
          this.loading = false;
          this.getSpanArr(res.data || []);
          console.info("this.ticketData1", this.ticketData);
        }
      });
        //edit end zyj 
    },
    // 取消按钮
    cancel() {
      this.openDetail = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workorderId: null,
        workorderCode: null,
        workorderName: null,
        orderSource: null,
        sourceCode: null,
        productId: null,
        productCode: null,
        productName: null,
        productSpc: null,
        unitOfMeasure: null,
        quantity: null,
        quantityProduced: null,
        quantityChanged: null,
        quantityScheduled: null,
        clientId: null,
        clientCode: null,
        clientName: null,
        requestDate: null,
        parentId: null,
        status: 0,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        orderType: null,
        fPlanStartDate: null,
        fPlanFinishDate: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    },
    // 行合并
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   console.log(columnIndex,'columnIndex');
    //   if (columnIndex === 7) {
    //     const _row = this.spanArr[rowIndex]; // 合并行数
    //     const _col = this.spanArr[rowIndex] > 0 ? 1 : 0; // 合并的列数
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     };
    //   }
    // },

    // 行合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 7) {
        const _row = this.spanArr[rowIndex]; // 合并行数
        const _col = this.spanArr[rowIndex] > 0 ? 1 : 0; // 合并的列数
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 按照类型合并
    getSpanArr(data) {
      this.spanArr = []; // tip: 后台获取完成数据后，一定要重置spanArr=[],避免出现合并混乱！！！！！
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          // 当为第一行时
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0;
          } else {
            // 判断当前值是否与上一行的【名称】相等，相等则进行合并
            if (data[i].processName === data[i - 1].processName) {
              this.spanArr[this.pos] += 1; // 合并单元格：合并的行数 +1
              this.spanArr.push(0); // 0代表单元格是不需要显示, 已经被合并的单元格
            } else {
              this.spanArr.push(1); // 1代表当前这行的数据需要被显示
              this.pos = i;
            }
          }
        }
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.Print_Div ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}

.H3 {
  text-align: center;
  font-weight: 700;
}
.bg-purple {
  font-size: 12px;
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: inline-block;
    // width: 100px;
    margin-right: 10px;
    white-space: nowrap;
    line-height: 25px;
  }
}
.titleDiv {
  font-weight: 700 !important;
  font-size: 20px;
}
.printDiv{
  border: 1px solid #333;
  width: 777px;
}

.printDiv ::v-deep .el-table--border .el-table__cell {
  border-color: #333 !important;
}


</style>
    